<template>
  <!-- 搜索框 -->
  <van-search
      v-model="searchValue"
      show-action
      placeholder="搜索我的收藏"
      @click="toSearchPage"
      class="search-box"
  >
    <template v-if="activeName === 'b'" #action>
      <van-icon
          name="plus"
          />
    </template>
    <template v-else #action>
      <van-icon
          name="edit"
          @click="toGnerate"/>
    </template>
  </van-search>
  <!-- 功能 -->
  <van-tabs v-model:active="activeName">
    <van-tab title="全部收藏" name="a" class="tab-content">
      <van-tabs v-model="subTabActiveName" class="sub-tabs">
        <van-tab name="tab1" :title="fullTitleTab1">
          <!-- 标签页 1 的内容 -->
        </van-tab>
        <van-tab name="tab2" title="已做过">
          <!-- 标签页 2 的内容 -->
        </van-tab>
        <van-tab name="tab3" title="未做过">
          <!-- 标签页 3 的内容 -->
        </van-tab>
      </van-tabs>
      <p v-if="noCollectionsA" class="tab-text-center tab-text">暂无收藏</p>
    </van-tab>
    <van-tab title="收藏夹" name="b" class="tab-content">
      <p v-if="noCollectionsB" class="tab-text-center tab-text">还没收藏夹</p>
      <div class="button-container">
        <van-button class="button-new-folder" @click="handleNewFolderClick">新建收藏夹</van-button>
      </div>
      <div v-for="(folder, index) in folders" :key="index" class="folder">
        {{ folder.name }}
      </div>
    </van-tab>
    <van-tab title="最近观看" name="c" class="tab-content">
      <p v-if="noCollectionsC" class="tab-text-center tab-text">咦~你居然还没看过视频？去发现美味吧</p>
    </van-tab>
  </van-tabs>
  <!-- ActionSheet 对话框 -->
  <van-action-sheet
      v-model:show="showActionSheet"
      title="新建收藏夹"
      closeable
      @close="showActionSheet = false"
  >
    <div class="content">
      <!-- 文本输入框 -->
      <van-field
          v-model="newFolderTitle"
          placeholder="为你的收藏夹添加标题"
          type="text"
      />
      <!-- 完成按钮 -->
      <van-button type="primary" style="margin-top: 5px" @click="createNewFolder" class="complete-button">完成</van-button>
    </div>
  </van-action-sheet>
</template>

<script setup>
import { createApp } from 'vue';
import { ref, reactive } from 'vue';
import { Icon, Search, Tabs, Tab, DropdownMenu, DropdownItem, Button, ActionSheet, Field } from 'vant';
import router from "../../../router/index.js";

const app = createApp();
app.use(Search);
app.use(Icon);
app.use(Tabs);
app.use(Tab);
app.use(DropdownMenu);
app.use(DropdownItem);
app.use(Button);
app.use(ActionSheet);
app.use(Field);

const toSearchPage = () => {
  router.push({ name: 'searchshoucang' });
};
const toGnerate = () => {
  router.push({ name: 'Gnerateshoucang' });
};
const searchValue = ref('');
const dropdownValue = ref('a');
const showActionSheet = ref(false);
const newFolderTitle = ref('');

const activeName = ref('a');
const subTabActiveName = ref('tab1');

const fullTitleTab1 = ref('默认排序');

const onSearch = (value) => {
  console.log('搜索:', value);
};

// 用于处理新建收藏夹按钮点击事件
const handleNewFolderClick = () => {
  showActionSheet.value = true;
};

// 用于处理完成按钮点击事件
const createNewFolder = () => {
  console.log('新建收藏夹:', newFolderTitle.value);
  showActionSheet.value = false;
  folders.value.push({ name: newFolderTitle.value });
  newFolderTitle.value = ''; // 清空输入框
};

const hasCollectionsA = ref(false);
const hasCollectionsB = ref(false);
const hasCollectionsC = ref(false);

const noCollectionsA = computed(() =>!hasCollectionsA.value);
const noCollectionsB = computed(() =>!hasCollectionsB.value);
const noCollectionsC = computed(() =>!hasCollectionsC.value);

const showDropdownForAll = ref(false);

const toggleDropdownForAll = () => {
  showDropdownForAll.value =!showDropdownForAll.value;
};

// 存储收藏夹的数组
const folders = reactive([]);
</script>

<style scoped>
.sub-tabs /deep/ .van-tab__title {
  white-space: nowrap;
  min-width: min-content;
}

.sub-tabs {
  justify-content: flex-start;
}

.tab-text-center {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.button-container {
  display: flex;
  justify-content: center;
}

.folder {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}
</style>